<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <script src="../js/vue.js"></script>
</head>

<body>
  <!-- 
        需求1：定义一个v-big指令，把绑定的数值放大十倍
        需求2：定义一个v-fbind指令，让其所绑定的input元素默认获取焦点
            和v-bind功能类似
     -->
  <div id="root">
    <h1>{{name}}</h1>
    <h2>当前的n值是:<span v-text="n"></span></h2>
    <h2>放大十倍后的n值是:<span v-big="n"></span></h2>
    <button @click="n++">点我n+1</button>

    <hr />
    <div id="root2">
      <input type="text" v-fbind:value="n" />
    </div>
  </div>

  <script>
    // 全局的自定义指令
    Vue.directive('fbind', {
      // 指令与元素成功绑定时 会调用bind函数
      bind(element, binding) {
        console.log('fbing-bind里的this', this);
        element.value = binding.value;
      },
      // 指令所在元素被插入页面时，被调用
      inserted(element, binding) {
        console.log('fbing-inserted里的this', this);
        element.focus();
      },
      // 指令所在的模板被重新解析时，被调用
      update(element, binding) {
        console.log('fbing-update里的this', this);
        element.value = binding.value;
        element.focus();
      },
    });

    const vm = new Vue({
      el: '#root',
      data: {
        name: '羽鸟',
        n: 1,
      },
      // 指令里的this Vue未接管，它指向window
      directives: {
        /*  
          第一个参数 真实DOM标签 第二个参数 一个对象 注重里面value的键值
        big函数何时被调用？ 
          1.指令与元素成功绑定时(一上来) 
          2.指令所在模板被重新解析时(更改name时，会触发big函数)
        */
        big(element, binding) {
          console.log('big函数被调用');
          console.log('big里的this', this); // !!!此处的this是window
          element.innerText = binding.value * 10;
          // console.log(element, binding.value);
        },
        fbind: {
          // 指令与元素成功绑定时 会调用bind函数
          bind(element, binding) {
            console.log('fbing-bind里的this', this);
            element.value = binding.value;
          },
          // 指令所在元素被插入页面时，被调用
          inserted(element, binding) {
            console.log('fbing-inserted里的this', this);
            element.focus();
          },
          // 指令所在的模板被重新解析时，被调用
          update(element, binding) {
            console.log('fbing-update里的this', this);
            element.value = binding.value;
            element.focus();
          },
        },
      },
    });

    new Vue({
      el: '#root2',
      data: {
        x: 1,
      },
    });
  </script>
</body>

</html>